<template>
  <div class="GoodsList">
    <!-- 头部 -->
    <!-- <div class="Header">
          <RouterLink to="/index" class="iconfont icon-shouye2 home"></RouterLink>
          <div class="fontSize">网易严选</div>
          <div class="right">
            <div class="iconfont icon-sousuo search"></div>
            <div class="iconfont icon-gouwuche shopping"></div>
          </div>
        </div> -->
    <div class="showHeader">
      <VanIcon name="wap-home-o" class="showHome"  />
      <h1 class="showH">网易严选</h1>
      <VanIcon name="search" class="showSearch"  />
      <VanIcon name="shopping-cart-o" class="showCart"  />
    </div>
    <!-- 导航栏 -->
    <van-tabs v-model:active="active" color="red" :offset-top="100" class="active" @click-tab="getGoodsList">
      <van-tab :name="item.id" :title="item.name" v-for="item in categoryL2List" :key="item.id"> </van-tab>
    </van-tabs>
    <div class="navBar">
      <div class="border"></div>
      <div class="HeaderText">{{ nameList.name }}</div>
      <div class="Main">
        <div @click="goDetail" class="MainLeft" v-for="item in GoodsList" :key="item.id">
          <img class="oo" :src="item.topLogo.logoUrl" alt="" />
          <div style="margin-left: 15px">
            <img class="MainLeftImage" :src="item.primaryPicUrl" alt="" />
            <div class="MainLeftBottom">
              <div class="MainLeftBottomImage">
                <img
                  class="MainLeftBottomImage"
                  :src="attr1.logoUrl"
                  alt=""
                  v-for="(attr1, index) in item.preLogo"
                  :key="index"
                />
                <span class="MainLeftBottomText">{{ item.name }}</span>
              </div>
              <div class="MainLeftBottomImage1" v-for="attr3 in item.itemTagList" :key="attr3.itemId">
                <img class="MainLeftBottomImage" src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="" />
                <span class="MainLeftBottomImageText">{{ attr3.name }}</span>
              </div>
              <div class="MainLeftBottomImage2">
                <span class="MainLeftBottomImage2Text"
                  >到手<span class="MainLeftBottomImage2Yuan">￥{{ item.retailPrice }}</span></span
                >
                <span class="MainLeftBottomImage2Span">￥{{ item.sortOriginPrice }}</span>
              </div>
              <div class="MainLeftBottomImage3Span">
                <span class="span">{{ item.finalPriceInfoVO?.banner?.title }}</span>
                <span class="span1">{{ item.finalPriceInfoVO?.banner?.content }}</span>
              </div>
              <div class="MainLeftBottomImage3">
                <span>满69减20元</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 50px"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'GoodsList'
})
</script>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'

import { getPagingData, type categoryL2Li, type itemList } from '../../api/category'

import { useRoute, useRouter } from 'vue-router'

const router = useRoute()

const $router = useRouter()

const goDetail = () => {
  $router.push('/detail')
}
const { attr1, lsitID } = router.query

const categoryL2List = ref<categoryL2Li[]>([])

let attr = attr1

onMounted(() => {
  getIndexInit()
  // console.log(attr1, lsitID)
})

const getIndexInit = async () => {
  try {
    const result = await getPagingData(attr as unknown as number, lsitID as unknown as number)
    console.log(attr1, lsitID)
    categoryL2List.value = result.data.categoryL2List

    nameList.value = result.data.categoryItems.category

    GoodsList.value = result.data.categoryItems.itemList

    // console.log(result)
  } catch (error) {
    return Promise.reject(error)
  }
}
// const toDetail = () => {
//   name: 'detail'
//   router.push('/detail')
//    path: '/detail'
// }

const active = ref(0)

const GoodsList = ref<itemList[]>([])

// 数据列表
const nameList = ref({
  bannerList: null,
  bannerUrl: '',
  categoryType: '',
  extra: null,
  frontDesc: '',
  frontName: '',
  frontNameIcon: null,
  iconUrl: null,
  id: 0,
  imgUrl: null,
  level: null,
  name: '',
  showIndex: '',
  subCateList: [],
  superCategoryId: '',
  type: 0,
  wapBannerUrl: '',
  wapExpandPicTargetUrl: null
})

const getGoodsList = (tid: any) => {
  // 解构需要的值
  const { name } = tid

  attr = name

  getIndexInit()
}

</script>

<style lang="less" scoped>
.Header {
  height: 45px;
  display: flex;
  background-color: #fafafa;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e4e4e4;
  color: #747474;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  .fontSize {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    letter-spacing: 2px;
  }
  .home {
    font-size: 25px;
    margin-left: 10px;
    margin-right: 30px;
  }
  .right {
    display: flex;
    margin-right: 10px;
    .search {
      font-size: 25px;
    }
    .shopping {
      font-size: 25px;
      margin-left: 5px;
    }
  }
}
.showHeader {
      width: 375px;
      height: 44px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      padding-left: 12px;
      padding-right: 8px;
      border: 1px solid black;
      box-sizing: border-box;
      text-align: center;
      .showHome {
        width: 24px;
        height: 22px;
      }
      .showSearch {
        margin-right: 20px;
      }
      .showH {
        flex: 1;
        text-align: center;
      }
    }
.navBar {
  .border {
    margin-top: 5px;
    border: 5px solid #eeeeee;
  }
  .HeaderText {
    text-align: center;
    margin-top: 70px;
    font-size: 15px;
    color: black;
    margin-bottom: 12px;
  }
  .Main {
    display: flex;
    flex-wrap: wrap;
    .MainLeft {
      width: 172px;
      margin-left: 5px;
      margin-bottom: 10px;
      margin-left: 5px;
      position: relative;
      .MainLeftImage {
        width: 158px;
        height: 158px;
        border-radius: 5px;
        background-color: #c9c8c8;
      }
      .MainLeftBottom {
        width: 158px;
        .MainLeftBottomImage3 {
          display: block;
          border: 1px solid;
          width: 71px;
          font-size: 11px;
          border-radius: 25px;
          background-color: red;
          color: #ffffff;
          text-align: center;
        }
        .MainLeftBottomImage2 {
          .MainLeftBottomImage2Text {
            font-size: 12px;
            color: red;
            .MainLeftBottomImage2Yuan {
              font-size: 20px;
            }
          }
          .MainLeftBottomImage2Span {
            text-decoration: line-through;
            font-size: 11px;
            margin-left: 5px;
          }
        }
        .MainLeftBottomImage3Span {
          width: 160px;
          display: flex;
          background-color: #ffe9eb;
          border-radius: 25px;
          margin-bottom: 10px;
          .span {
            display: block;
            border: 1px solid;
            background-color: red;
            border-radius: 25px;
            height: 20px;
            color: white;
            line-height: 20px;
          }
          .span1 {
            width: 110px;
            height: 20px;
            font-size: 12px;
            line-height: 20px;
            overflow: hidden; /*超出部分隐藏*/
            text-overflow: ellipsis; /*超出部分省略号表示*/
            white-space: nowrap; /*强制单行显示*/
            display: inline-block; /*转换为行内块元素*/
            color: red;
          }
        }
        .MainLeftBottomImage1 {
          border: 1px solid #dfdfdf;
          border-radius: 25px;
          width: 73px;
          height: 17px;
          display: flex;
          align-items: center;
          color: black;
          .MainLeftBottomImage {
            width: 7px;
            height: 11px;
            margin-left: 5px;
          }
          .MainLeftBottomImageText {
            font-size: 12px;
            text-align: center;
          }
        }
        .MainLeftBottomImage {
          .MainLeftBottomImage {
            width: 16px;
            height: 15px;
            margin-right: 2px;
          }
          .MainLeftBottomText {
            font-size: 11px !important;
            color: black;
          }
        }
      }
    }
  }
}
:deep(.van-tab--grow) {
  font-size: 15px;
  height: 30px;
  padding: 10px;
  margin-right: 10px;
}
:deep(.van-tabs__line) {
  border-bottom: 1px solid #dd2d34;
  width: 50px;
  height: 0px;
}

:deep(.van-tabs__wrap) {
  display: flex;
}

:deep(.van-tabs__wrap) {
  height: 35px;
}

.active {
  position: fixed;
  top: 50px;
  z-index: 998;
}

.oo {
  position: absolute;
  right: 0;
  width: 70px;
  height: 35px;
}
</style>
